<template>
  <el-input
    placeholder="签约方"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-input
    placeholder="房屋编号"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-input
    placeholder="合同编号"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-button type="primary">查询</el-button>
  <el-button>重置</el-button>
  <!-- <el-button @click="jiaofeixiangVisible = true">缴费管理</el-button> -->
  <el-table
    :data="
      chargeList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    "
    height="600"
    style="width: 100%"
  >
    <el-table-column type="selection"></el-table-column>
    <el-table-column
      align="center"
      prop="manageId"
      label="ID"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="housesId"
      label="房屋编号"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="contractInfo.contractId"
      label="合同编号"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="contractInfo.userId"
      label="签约方"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="contractInfo.contractType"
      label="类型"
    ></el-table-column>
    <el-table-column
      align="center"
      width="150"
      prop="contractInfo.createDate"
      label="签约时间"
    ></el-table-column>
    <el-table-column
      align="center"
      width="150"
      prop="contractInfo.endTime"
      label="合同结束时间"
    ></el-table-column>
    <el-table-column label="是否欠费" align="center">
      <template #default="scope">
        <div
          v-if="scope.row.paymentRecord.paymentType != null"
          style="color: #13ce66"
        >
          否
        </div>
        <div v-else style="color: red">是</div>
      </template>
    </el-table-column>
    <el-table-column align="center" label="账单日">
      <div>每月10号</div>
    </el-table-column>
    <el-table-column align="center" fixed="right" label="操作" min-width="200">
      <template #default="scope">
        <el-span
          style="font-size: 12px; color: #2561ef"
          @click="check(scope.row)"
        >
          查看
        </el-span>
        &emsp;
        <el-span
          @click="billBtn(scope.row)"
          style="font-size: 12px; color: #2561ef"
        >
          填写账单
        </el-span>
        &emsp;
        <!-- <el-span
          v-if="scope.row.paymentRecord.paymentType==null"
          @click="dialogFormVisible1 = true"
          style="font-size: 12px; color: #2561ef"
        >
          催缴
        </el-span> -->
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[5, 10, 15, 20, 30]"
    :size="default"
    :disabled="disabled"
    :background="background"
    layout="total, prev, pager, next,sizes"
    :total="chargeList.length"
  />
  <el-dialog v-model="dialogFormVisible" title="缴费项" width="500">
    <el-table :data="itemList.list">
      <el-table-column prop="name" label="缴费项"></el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
      <el-table-column prop="type" label="类型">
        <template #default="scope">
          <el-tag v-if="scope.row.type == 2" type="success">固定费用</el-tag>
          <el-tag v-else type="danger">动态费用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="number" label="用量">
        <template #default="scope">
          <el-input v-if="scope.row.type == 1" v-model="scope.row.number" />
          <el-tag v-else type="success">无</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="账单账期">第{{ billDate }}期</el-table-column>
      <el-table-column prop="unit" label="单位"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="deleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="pushBills">推送账单</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- <el-dialog v-model="dialogFormVisible1" title="催缴" :width="450">
    <el-form style="padding: 20px">
      <el-form-item label="催缴费用" label-width="formLabelWidth">
        <el-input autocomplete="off" />
      </el-form-item>
      <el-form-item label="催缴说明" :label-width="formLabelWidth">
        <el-input
          v-model="textarea"
          style="width: 290px"
          :rows="2"
          type="textarea"
          placeholder="请添加描述内容"
        />
      </el-form-item>
      <el-form-item label="手机号&emsp;" :label-width="formLabelWidth">
        <el-input autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible1 = false">
          发送
        </el-button>
      </div>
    </template>
  </el-dialog> -->
</template>
<script setup>
import { selectConPayList, propertyItemList, pullBill } from '@/api/charge'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
const dialogFormVisible = ref(false)
var pageSize = ref(5)
var currentPage = ref(1)
var router = useRouter()
var chargeList = ref([])
var itemList = ref({
  list: [],
  houseId: '',
  nowDate: '',
})
var houses_id = ref()
var user_id = ref()
var contract_id = ref()
var rowData = reactive()
var billDate = ref()
var result = ref(false)
onMounted(async () => {
  chargeList.value = (
    await selectConPayList(houses_id.value, user_id.value, contract_id.value)
  ).data
  itemList.value.list = (await propertyItemList()).data
})
//当前日期格式化
function dateFormat() {
  var date = new Date()
  var year = date.getFullYear()
  var month =
    date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
  var minutes =
    date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  var seconds =
    date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  return (
    year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
  )
}
function billBtn(row) {
  console.log(row)
  console.log(dateFormat())
  dialogFormVisible.value = true
  billDate.value =
    (dateFormat().split('-')[0] - row.contractInfo.createDate.split('-')[0]) *
      12 +
    (dateFormat().split('-')[1] - row.contractInfo.createDate.split('-')[1])
  itemList.value.houseId = row.contractInfo.houseId
  itemList.value.nowDate = dateFormat()
}
function check(row) {
  rowData = JSON.stringify(row)
  router.push({ path: '/Charge/ChargeInfo', query: { rowData } })
}
const deleteItem = row => {
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    itemList.value = itemList.value.filter(item => item.itemId !== row.itemId)
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  })
}
const pushBills = () => {
  dialogFormVisible.value = false
  {
    ElMessageBox.confirm('确认推送么？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      result.value = (await pullBill(itemList.value)).data
      if (result.value) {
        ElMessage({
          type: 'success',
          message: '推送成功',
        })
        location.reload()
      } else {
        ElMessage({
          type: 'error',
          message: '推送失败',
          duration: 500,
          onClose: () => {
            location.reload()
          },
        })
      }
    })
  }
}
</script>
<style lang="scss">
/* ... 样式不变 ... */
.search {
  width: 15%;
  margin-bottom: 20px;
}
table th {
  height: 40px;
  line-height: 40px;
}
</style>
